<template>
  <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
    <el-menu-item index="0">WG</el-menu-item>
    <div class="flex-grow" />
    <el-sub-menu index="1" v-if="user">
      <template #title><el-icon><Plus /></el-icon></template>
      <el-menu-item index="1-1" @click="showAddForm = true">新建WG</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="2" v-if="user">
      <template #title>{{getUsername}}</template>
      <el-menu-item index="2-1" @click="routeDispatch('/')">个人主页</el-menu-item>
      <el-menu-item index="2-2" @click="logout()">退出登录</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="3" v-if="!user" @click="routeDispatch('/register')">注册</el-menu-item>
    <el-menu-item index="4" v-if="!user" @click="routeDispatch('/login')">登录</el-menu-item>
  </el-menu>
  <AddWGForm v-if="showAddForm"/>
</template>

<script setup>
  import { reactive } from 'vue'
  import { routeDispatch } from '../http/utils.js'
  // 通过pinia获取user信息，如果user信息不为null，则个人信息等按钮显示，否则显示注册登录按钮
  // 在App.vue中会去读取浏览器localStorage中是否保存有user信息，有则通过pinia设置到user store中
  import userStore from '../store/user.js'
  import {storeToRefs} from 'pinia'
  import { logoutUser } from '../http/userApi.js'
  
  import wgStore from '../store/wg.js'
  
  const wStore = wgStore()
  const { showAddForm } = storeToRefs(wStore)
  console.log("showAddForm", showAddForm['_object'].showAddForm)
  
  
  import AddWGForm from './AddWGForm.vue'
  
  const uStore = userStore()
  
  const {user,getUsername} = storeToRefs(uStore)

  const logout = function() {
    // 前端页面清除登录信息
    uStore.updateUser(null)
    window.localStorage.removeItem('wg_token')
    window.localStorage.removeItem('wg_user')
    // 调用后台的退出登录接口
    logoutUser()
    routeDispatch("/login")
  }
  
  
</script>

<style scoped>
  .flex-grow {
    flex-grow: 1;
  }
</style>
